<!--
 * @Description  : 分页组件
 * @Autor        : 杜康
 * @Date         : 2023-04-19 16:07:28 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-04-20 18:16:47 +0800
-->
<template>
  <el-pagination
    class="my-page"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    :layout="layout"
    :total="total"
    background
  >
  </el-pagination>
</template>
<script>
import { isEmpty } from "lodash";
export default {
  name: "MyTablePage",
  props: {
    page: {
      type: Object,
      require: true,
      default: () => {
        return {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        };
      },
    },
  },
  data() {
    return {
      pageSizes: [10, 15, 25, 50, 100, 200, 500],
      layout: "total, sizes, prev, pager, next, jumper",
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  watch: {
    page: {
      handler(newVal, oldVal) {
        if (!isEmpty(newVal)) {
          this.init();
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (!isEmpty(this.page)) {
      this.init();
    }
  },
  methods: {
    /**
     * @description: 初始化
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-19 17:32:13 +0800
     */
    init() {
      const { pageNo, pageSize, total } = this.page;
      this.currentPage = pageNo;
      this.pageSize = pageSize;
      this.total = total;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.$emit("changePage", {
        pageNo: this.pageNo,
        pageSize: val,
        total: this.total,
      });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.$emit("changePage", {
        pageNo: val,
        pageSize: this.pageSize,
        total: this.total,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-page {
  text-align: right;
}
</style>
